<figure class="image image-style-align-center">
  <img style="aspect-ratio:886/663;" src="2_Mermaid Diagrams_image.png"
  width="886" height="663">
</figure>
<p>Trilium supports Mermaid, which adds support for various diagrams such
  as flowchart, sequence diagram, class diagram, state diagram, pie charts,
  etc., all using a text description of the chart instead of manually drawing
  the diagram.</p>
<p>For the official documentation of Mermaid.js see <a href="https://mermaid.js.org/intro/">mermaid.js.org/intro/</a>.</p>
<h2>Layouts</h2>
<p>Depending on the chart being edited and user preference, there are two
  layouts supported by the Mermaid note type:</p>
<ul>
  <li>Horizontal, where the source code (editable part) is on the left side
    of the screen and the preview is to the right.</li>
  <li>Vertical, where the source code is at the bottom of the screen and the
    preview is at the top.</li>
</ul>
<p>It's possible to switch between the two layouts at any time by pressing
  the
  <img src="Mermaid Diagrams_image.png">icon in the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;area.</p>
<h2>Interaction</h2>
<ul>
  <li>The source code of the diagram (in Mermaid format) is displayed on the
    left or bottom side of the note (depending on the layout).
    <ul>
      <li>Changing the diagram code will refresh automatically the diagram.</li>
    </ul>
  </li>
  <li>The preview of the diagram is displayed at the right or top side of the
    note (depending on the layout):
    <ul>
      <li>There are dedicated buttons at the bottom-right of the preview to control
        the zoom in, zoom out or re-center the diagram:
        <img src="1_Mermaid Diagrams_image.png">
      </li>
      <li>The preview can be moved around by holding the left mouse button and dragging.</li>
      <li>Zooming can also be done by using the scroll wheel.</li>
      <li>The zoom and position on the preview will remain fixed as the diagram
        changes, to be able to work more easily with large diagrams.</li>
    </ul>
  </li>
  <li>The size of the source/preview panes can be adjusted by hovering over
    the border between them and dragging it with the mouse.</li>
  <li>In the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;area:
    <ul>
      <li>The source/preview can be laid out left-right or bottom-top via the <em>Move editing pane to the left / bottom</em> option.</li>
      <li>Press <em>Lock editing</em> to automatically mark the note as read-only.
        In this mode, the code pane is hidden and the diagram is displayed full-size.
        Similarly, press <em>Unlock editing</em> to mark a read-only note as editable.</li>
      <li>Press the <em>Copy image reference to the clipboard</em> to be able to insert
        the image representation of the diagram into a text note. See&nbsp;<a class="reference-link"
        href="#root/_help_0Ofbk1aSuVRu">Image references</a>&nbsp;for more information.</li>
      <li>Press the <em>Export diagram as SVG</em> to download a scalable/vector rendering
        of the diagram. Can be used to present the diagram without degrading when
        zooming.</li>
      <li>Press the <em>Export diagram as PNG</em> to download a normal image (at
        1x scale, raster) of the diagram. Can be used to send the diagram in more
        traditional channels such as e-mail.</li>
    </ul>
  </li>
</ul>
<h2>Errors in the diagram</h2>
<p>If there is an error in the source code, the error will be displayed in
  an information pane.</p>
<p>During the state of an error, the diagram will no longer be rendered and
  the previously working diagram will remain in the preview section.</p>